<template>
  <view class="cart">
    <!-- 列表 -->
    <view class="cart-list">
      <view
        class="cart-item"
        v-for="(item, index) in cartList"
        :key="item.goods_id"
      >
        <!-- 复选框 -->
        <view class="cart-chk">
          <!-- 把下标值传给事件 -->
          <checkbox-group @change="onGoodsCheck(index)">
            <checkbox :checked="item.checked"> </checkbox>
          </checkbox-group>
        </view>
        <!-- 商品图片 -->
        <view class="cart-img">
          <image mode="widthFix" :src="item.goods_small_logo"></image>
        </view>
        <!-- 商品详情 -->
        <view class="cart-detail">
          <view class="cart-goods-name u-line-2">{{ item.goods_name }}</view>
          <view class="cart-goods-info">
            <view class="goods-price">{{ item.goods_price }}</view>
            <view class="goods-num-tool">
              <!-- 切换其他的实现方式！！！  -->
              <view class="num-change" @click="onNumChange(-1, index)">-</view>
              <view class="num-value">{{ item.nums }}</view>
              <view class="num-change" @click="onNumChange(+1, index)">+</view>
            </view>
          </view>
        </view>
      </view>
    </view>
    <!-- 购物车栏 -->
    <view class="cart-tool">
      <!-- 全选 -->
      <view class="all-checkbox">
        <checkbox-group>
          <checkbox>全选</checkbox>
        </checkbox-group>
      </view>
      <!-- 合计 -->
      <view class="all-price">
        合计:
        <text>￥{{ totalPrice }}</text>
      </view>
      <!-- 结算 -->
      <view class="go-pay">去结算{{ totalNum }}</view>
    </view>
  </view>
</template>

<script>
// mapState
import { mapState } from "vuex";
export default {
  // 计算属性
  computed: {
    ...mapState(["cartList"]),

    totalNum() {
      let nums = 0;

      // 遍历 cartList , 拿到里面每一个单选框的选中状态
      this.cartList.forEach((value) => {
        // 判断,当 checked 为true 选中状态,
        if (value.checked) {
          // 我才让数量加等于
          nums += value.nums;
        }
      });
      return nums;
    },

    // 购买的总价格
    totalPrice() {
      let Price = 0;

      // 遍历 cartList , 拿到里面每一个单选框的选中状态
      this.cartList.forEach((value) => {
        // 判断,当 checked 为true 选中状态,
        if (value.checked) {
          // 然后 变量加等于 数量 乘以 价格
          Price += value.nums * value.goods_price;
        }
      });
      return Price;
    },
  },
  methods: {
    // 单选框的选中状况
    onGoodsCheck(index) {
      console.log(index);

      let cartList = this.cartList;

      // 取反
      cartList[index].checked = !cartList[index].checked;
      // 新的数据 发送回vuex
      this.$store.commit("setCartList", cartList);
    },

    // 数量编辑
    async onNumChange(unit, index) {
      // console.log(unit, index);

      let cartList = this.cartList;

      // 判断用户是否想要删除元素
      if (unit == -1 && this.cartList[index].nums === 1) {
        // // 用户想要删除
        console.log("用户想要删除");

        // 弹出框,二次确认
        let [err, res] = await uni.showModal({
          title: "提示",
          content: "您真得舍得删除吗?",
        });
        // console.log(res);

        // 判断用户点击 删除还是取消
        if (res.confirm) {
          // 执行删除元素
          cartList.splice(index, 1);

          // 新的数据 发送回vuex
          this.$store.commit("setCartList", cartList);
        }
      } else {
        // 正常做数据修改
        cartList[index].nums += unit;

        // 新的数据 发送回vuex
        this.$store.commit("setCartList", cartList);
      }
    },
  },
};
</script>

<style lang="scss">
.cart {
  padding-bottom: 83rpx;
  .cart-list {
    padding: 15rpx;
    .cart-item {
      display: flex;
      .cart-chk {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: center;
        checkbox {
        }
      }

      .cart-img {
        flex: 2;
        display: flex;
        align-items: center;
        justify-content: center;
        image {
          width: 80%;
        }
      }

      .cart-detail {
        flex: 3;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        .cart-goods-name {
          font-size: 26rpx;
          color: #666;
        }

        .cart-goods-info {
          display: flex;
          justify-content: space-between;
          align-items: center;
          .goods-price {
            font-size: 26rpx;
            color: #eb4450;
          }

          .goods-num-tool {
            display: flex;

            .num-change {
              width: 40rpx;
              height: 40rpx;
              border-radius: 50%;
              border: 1rpx solid #ccc;
              text-align: center;
              line-height: 34rpx;
              font-size: 26rpx;
              color: #666;
            }

            .num-value {
              height: 40rpx;
              margin: 0 20rpx;
              display: flex;
              align-items: center;
              justify-content: center;
              font-size: 26rpx;
              color: #666;
            }
          }
        }
      }
    }
  }
}

.cart-tool {
  border-top: 1rpx solid #ccc;
  padding: 0 20rpx;
  display: flex;
  height: 83rpx;
  align-items: center;
  color: #666;
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  background-color: #fff;
  box-sizing: border-box;

  .all-checkbox {
    width: 144rpx;
    font-size: 26rpx;
    checkbox-group {
      checkbox {
      }
    }
  }

  .all-price {
    flex: 1;
    font-size: 26rpx;
    text {
      color: #eb4450;
    }
  }

  .go-pay {
    padding: 0 20rpx;
    height: 52rpx;
    background-color: #ea4350;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 26rpx;
    font-size: 22rpx;
  }
}
</style>